<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>性别:{{sex}}</h2>
  <button @click="sayHello">使用setup中的方法</button>
  <br>
  <br>
  <button @click="sayWelcome">使用methods中的方法</button>
  <br>
  <br>
  <h3>vue2中<em>可以</em>调用setup中的变量和方法</h3>
  <button @click="test1">在vue2语法中调用setup中的变量和方法</button>
  <br>
  <br>
  <h3>在setup中<em>不能</em>调用vue2语法的变量和方法</h3>
  <button @click="test2">在setup中调用vue2语法的变量和方法</button>
</template>

<script>
// import {h} from 'vue'
export default {
  name: 'App',
  data(){
    return{
      sex:'男'
    }
  },
  methods:{
    test1(){
      console.log('sayHello',this.sayHello)
      alert(`我叫${this.name},性别${this.sex},今年${this.age}岁了`)
    },
    sayWelcome(){
      alert('欢迎学习')
    }
  },
  // 注意:setup 不能用async 因为返回值不再是一个对象，而是promise，模板看不到return对象中的属性
  // 暂时不考虑响应式
  setup(){
    // 变量
    let name = '洪奇奇'
    let age = 18
    // 方法
    function sayHello(){
      alert(`你好，我叫${name}，今年${age}岁`)
    }

    function test2(){
      console.log('name:',name)
      console.log('age:',age)
      console.log('sex:',this.sex)
      console.log('sayWelcome:',this.sayWelcome)
    }

    // 1、返回一个对象
    return {
      name,
      age,
      sayHello,
      test2
    }
    // 2、返回一个渲染函数
    // 当返回一个渲染函数时，页面中其他东西都不会显示，只会显示渲染函数中返回的内容
    // return () => {return h('h2','加油学习')}
    // return () =>  h('h2','加油学习')

  }
}
</script>
